<template>
  <el-form
    :model="form"
    label-width="130px"
    :show-message="false"
    style="display: inline-block"
    :rules="formruls"
    ref="form"
  >
    <el-row>
      <el-col :span="8">
        <el-form-item label-width="60px">
          <el-upload
            action=""
            :show-file-list="false"
            list-type="picture-card"
            :http-request="httpRequest"
          >
            <img v-if="photosUrl" :src="photosUrl" alt="" class="avatar" />
            <span>上传权益logo</span>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="权益名称:" prop="equitiesName">
          <el-input
            placeholder="请输入权益名称"
            clearable
            v-model="form.equitiesName"
          ></el-input>
        </el-form-item>
        <el-form-item label="权益内容:" prop="equitiesDesc">
          <el-input
            placeholder="请输入权益内容"
            clearable
            type="textarea"
            :rows="2"
            v-model="form.equitiesDesc"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <Tinymce v-model="form.equitiesText" :height="300" />
      </el-col>
      <el-col style="text-align: right; margin-top: 10px">
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { fileUpload, getImageUrl } from '@/utils/index'
import Tinymce from '@/components/Tinymce'
import { equitiesDetail } from '@/api/after-sale/client/level'
export default {
  components: {
    Tinymce,
  },
  props: {
    fromdata: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        equitiesDesc: '', //string权益内容
        equitiesLogo: '', //string权益logo
        equitiesName: '', //string权益名称
        equitiesText: '', //string权益文本
        memberId: '', //integer($int32)
        id: '', //
      },
      photosUrl: '', //图片
      formruls: {
        // priceUp: [{ required: true, trigger: 'blur' }],
      },
    }
  },
  async created() {
    //会员卡ID查询权益详情
    if (this.fromdata.id) {
      let { data } = await equitiesDetail(this.fromdata.id)
      this.form = { ...data }
      this.photosUrl=getImageUrl(data.equitiesLogo);
      
    }else if(this.fromdata.memberId){
      this.form.memberId=this.fromdata.memberId;
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const options = this.form
          if (!this.form.id) {
            this.$emit('operate', options, 'send')
          } else {
            options.id = this.form.id
            this.$emit('operate', options, 'update')
          }
        } else {
          return false
        }
      })
    },
    //文件上传
    httpRequest(value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res
        if (success) {
          this.form.equitiesLogo = data.id
          this.photosUrl = getImageUrl(data.id)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.avatar {
  width: 146px;
  height: 146px;
  display: block;
}
/deep/ .el-upload--picture-card{
   width: 146px;
  height: 146px;
}
</style>
